<template>
  <div class="my-bloodfriend">
    <cube-index-list :data="data"  @select="selectItem" @title-click="clickTitle" v-if="data.length > 0"/>
    <no-data v-else :img="require('./img/noData.png')" text='暂无添加浆友哦～'/>
  </div>
</template>

<script>
import Pad from "@/components/pad";
import noData from '@/components/noData';
import { bloodFriend } from '@/api/bloodFriend'
import { IndexList } from "cube-ui";

export default {
  data() {
    return {
      data:[]
    };
  },
  components: {
    Pad,
    noData
  },
  created() {
    bloodFriend().then(res =>{
      console.log(res)
      this.data = res.data;
    })
  },
  methods: {
    selectItem(item) {
      console.log(item.name);
      this.$router.push({
        path:`/myFriendDetail/${item.id}`,
      })
    },
    clickTitle(title) {
      console.log(title);
    }
  }
};
</script>

<style lang='scss'>
.my-bloodfriend {
  height: 100%;
  .title {
    height: 0.8rem /* 60/75 */;
    color: #2285ff;
    font-size: 0.346667rem /* 26/75 */;
    padding-left: 0.4rem /* 30/75 */;
    display: flex;
    align-items: center;
  }
  .people {
    height: 1.6rem /* 120/75 */;
    background: #ffffff;
    padding-left: 0.4rem /* 30/75 */;
    font-size: 0.346667rem /* 26/75 */;
    display: flex;
    align-items: center;
  }
  .sidebar {
    position: absolute;
    right: 0;
    top: 0;
    .item {
      font-size: 0.213333rem /* 16/75 */;
      color: #666666;
      text-align: center;
    }
  }
}
</style>
